<template>
  <div>
    <t-form ref="form" :rules="FORM_RULES" :data="formData" :colon="true" @reset="onReset" @submit="onSubmit">
      <t-form-item label="支付宝帐号" name="account">
        <t-input v-model="formData.account" placeholder="请输入支付宝帐号" ></t-input>
      </t-form-item>
      <t-form-item label="支付宝真实姓名" name="name">
        <t-input v-model="formData.name" placeholder="请输入与支付宝帐号真实姓名" @enter="onEnter"></t-input>
      </t-form-item>

      <t-form-item>
        <t-space size="small">
          <t-button theme="primary" type="submit">提交</t-button>
          <t-button theme="default" variant="base" type="reset">重置</t-button>
          <!-- 下方示例代码，有效，勿删 -->
          <!--<t-button theme="default" @click="submitForm">实例方法提交</t-button>-->
          <!--<t-button theme="default" variant="base" @click="resetForm">实例方法重置</t-button>-->
          <!--<t-button theme="default" variant="base" @click="validateOnly">仅校验</t-button>-->
        </t-space>
      </t-form-item>
    </t-form>

  </div>
</template>

<script setup>
  import {
    reactive,
    ref,
    toRefs,
    defineEmits
  } from 'vue'
  import {
    MessagePlugin
  } from 'tdesign-vue-next'
  import {
    saveWithdrawAccount
  } from '@/api/user'
  import {
    useUserStore
  } from '@/store'

  const userStore = useUserStore()
  const emits = defineEmits(['onBindSuccess'])
  const formData =reactive({
    account: userStore.assetInfo.AlipayWithdrawNo,
    type: 2,
    name:''
  })
  ;

  const FORM_RULES = {
    account: [{
      required: true,
      message: '支付宝帐号必填'
    }],
    name: [{
      required: true,
      message: '支付宝真实姓名必填'
    }]
  };
  const form = ref(null);
  const save = () => {
    saveWithdrawAccount(formData)
      .then(ret => {
        MessagePlugin.success('提现帐号保存成功');
        emits('onBindSuccess')
      })
      .catch(e => {
        MessagePlugin.error(e.msg)
      })
  }
  const onReset = () => {
    MessagePlugin.success('重置成功');
  };
  const resetForm = () => {
    form.value.reset();
    // 下方为示例代码，有效，勿删
    // form.value.reset({ type: 'initial' });
    // form.value.reset({ type: 'empty' });
    // form.value.reset({ type: 'initial', fields: ['name'] });
    // form.value.reset({ type: 'empty', fields: ['name'] });
  };

  const onSubmit = ({ validateResult, firstError }) => {
    if (validateResult === true) {
      save()
    } else {
      console.log('Validate Errors: ', firstError, validateResult);
      MessagePlugin.warning(firstError);
    }
  };

// 禁用 Input 组件，按下 Enter 键时，触发 submit 事件
const onEnter = (_, { e }) => {
  e.preventDefault();
};
</script>

<style>
</style>
